<template>
  <div id="app">
    <div class="title">
    <span>{{ title }}</span>
      </div>
    <div class="input-bar">
    <input v-model="event1" placeholder="请输入待办事件名称" @keyup.enter="addEvent" @keyup.delete="clearBox" class="add-box">
      <input type="button" value="添加"  @click="addEvent" class="add-button">
    </div>
<ul class="box">
  <li v-for="(todo,index) in todos" :id="index" v-bind:class="{ 'box-item': !todo.done, 'box-finished-item': todo.done }">

    <input type="checkbox" value="index" name="choose" :id="'item'+index" v-on:click="change(index)" v-bind:checked="todo.done">
    <label :for="'item'+index"></label>

    <span>{{index+1}}</span>. <span>{{todo.value}}</span>
    <span class="close" @click="removeEventItem(index)"></span>
    <span class="time-stamp">{{ todo.time | hhmmss}}</span>

  </li>
</ul>
 <!--<span class="todos-inf-bar">总共{{ todos.length }}个事件,已完成{{doneEvents}}个事件,未完成{{todos.length-doneEvents}}个事件.</span>-->
      <todo :todos="todos.length" :doneEvents="doneEvents" />
  </div>
</template>

<script>
import Todo from './Todo.vue'
export default {
  name: 'app',
  components:{Todo},
  data () {
    return {
      title: 'vue-todos',
      todos:[
        {value:"阅读一本关于前端开发的书",done:false,time:new Date()},
        {value:"补充范例代码",done:true,time:new Date()},
        {value:"写心得",done:false,time:new Date()}
      ]
    }
  },
    methods:{
        change:function (index) {
            console.log(index + " " + this.todos[index].finished);
            this.todos[index].done=!this.todos[index].done;
        },
        removeEventItem: function (index) {
            console.log("removeEventItem");
            this.todos.splice(index, 1);
        },
        addEvent: function () {
            console.log("addEvent");
            console.log("this.event1=" + this.event1);
            if (!this.event1)  // if(this.name=="" || this.name== undefined||this.name==null)
            {
                console.log("this.event1");
            }
            else
            {
                this.todos.push({value:this.event1,done:false,time:new Date()});
            }
        },
        clearBox:function () {
            //this.event1="";
            console.log("清空");
        }
    }, computed:{
        doneEvents:function(){
            var count=0;
            for(var i=0;i<this.todos.length;i++){
                if(this.todos[i].done){
                    count++;
                }
            }
            return count;
        }
    },
    filters: {
        hhmmss: function (date) {
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            if (second >= 0 && second <= 9) {
                second = "0" + second;
            }
            return (date.getFullYear() + "-" + month + "-" + strDate + " " + hour + ":" + minute + ":" + second)
        }
    }
}
</script>
<style lang="css">
body {
  background: #f9f9f9;
}
.title{
  font-family: "Segoe UI Light";
  font-size:96px;
  font-weight: 100;
  color: #ababab;
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: auto;
  border: 1px solid #f9f9f9;
  text-align:center;
}
.box{
  border: 1px solid #696969;
  background-color: #ffffff;
  box-shadow:5px 2px 6px #969696;
  margin-left: 20%;
  margin-right: 20%;
  list-style:none;
}
.box-item{
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #565656;
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: lighter;
  height: 40px;
  width: auto;
  padding-top: 8px;
  color: #656565;
}
.box-finished-item{
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #565656;
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: lighter;
  height: 40px;
  width: auto;
  padding-top: 8px;
  text-decoration: line-through;
  color: #dfdfdf;
}
.time-stamp{
  font-size:9px;
  float:right;
  margin-right: 20px;
  margin-top:10px;
}


input[type="checkbox"]{
  /* width: 40px; */
  /* height: 40px; */
  /* -webkit-border-radius: 50%; */
  display: none;
}
input[type="checkbox"]+label {
  display: inline-block;
  width: 10%;
  margin-top: 0px;
  margin-left: 5px;
  text-align: left;
  -webkit-box-sizing: border-box;
}

label::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #EEE;
  vertical-align: middle;
  -webkit-border-radius: 50%;
  margin-right: 5px;
  -webkit-box-sizing:border-box;
  -webkit-transition:background ease-in .5s
}

input[type="checkbox"]:checked+label::before{
  background-color: rgb(53, 183, 111);
  border: 5px #EEEEEE solid;
}
.close {
  background: #ababab;
  color: #565656;
  border-radius: 12px;
  line-height: 20px;
  text-align: center;
  height: 20px;
  width: 20px;
  font-size: 18px;
  padding: 1px;
  top: -10px;
  right: -10px;
  float:right;
  margin-right: 20px;
  margin-top:5px;
}
/* use cross as close button */
.close::before {
  content: "\2716";
}
.input-bar{
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
}
.add-button{
  width: 12%;
  height: 40px;
  font-size: 18px;
  font-family:"微软雅黑";
  letter-spacing: 8px;
  padding-left: 12px;
  border-radius: 5px;
  color: #969696;
  border: 1px solid #969696;
}
.add-box{
  width: 80%;
  height: 40px;
  font-size: 18px;
  font-family:"微软雅黑";
  letter-spacing: 0px;
  padding-left: 12px;
  border-radius: 5px;
  color: #252525;
  border: 1px solid #969696;
}
.todos-inf-bar{
  margin-left: 20%;
  margin-right: 20%;
  width: 1000%;
  height: auto;
  font-size:24px;
  color:#45455d;
  padding-left:5%;
}
</style>